<template>
  <div class="components-container">
    <div class="editor">
      <tinymce v-model="tinymceData.tinymce_content1" :height="300" id='tinymce1' />
    </div>
    <div class="editor">
      <tinymce v-model="tinymceData.tinymce_content2" :height="100" id='tinymce2'/>
    </div>
<!--    <div class="editor-content" v-html="content" />-->
    <el-button type="primary" @click="onSubmit">更新</el-button>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getTinymce,updateTinymce } from '@/api/tinymce'
export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      tinymceData:{
        tinymce_content1: ``,
        tinymce_content2:'',
      }

    }
  },
  mounted() {
    this.getTinymceData()
  },
  methods:{
    getTinymceData(){
      getTinymce().then((res)=>{
        if(res.status==200){
            this.tinymceData.tinymce_content1 = res.data.tinymce_content1
            this.tinymceData.tinymce_content2= res.data.tinymce_content2
        }
      })
    },
    onSubmit(){
      updateTinymce(this.tinymceData).then((response)=>{
        if(response.status==200){
          this.$notify({
            title: 'Success',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        }else {
          this.$notify({
            title: 'Error',
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.components-container{
  padding: 0 30px;
  padding-bottom: 20px;
}
.editor{
  padding-bottom: 20px;
}
.editor-content{
  margin-top: 20px;
}
</style>

